<template>
  <div id="word-module-table">
    <el-button @click="addWordData">添加</el-button>
    <el-table :data="tableDataList" border>

      <el-table-column label="中文">
        <template slot-scope="scope">
        <!-- 编辑显示-->
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.wordChinese"></el-input>
      <!-- 查看显示-->
          <span v-show="!scope.row.show">{{scope.row.wordChinese}}</span>
        </template>
      </el-table-column>

      <el-table-column label="英语">
        <template slot-scope="scope">
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.wordEnglish"></el-input>
          <span v-show="!scope.row.show">{{scope.row.wordEnglish}}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <span v-show="scope.row.show">
                      <el-button @click="saveWordData(scope)" type="primary">保存单词</el-button>
          </span>
          <span v-show="!scope.row.show">
            <el-button @click="scope.row.show =true">编辑</el-button>
          </span>
          <el-button @click="deleteAction(scope.row.addIndexId,scope.row.wordChinese,scope.row.wordEnglish,scope.row.id)">删除单词</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import ElementUI from "element-ui";
    import Bus from '../course/bus.js';
    export default {
        name: "word-module-table",
      // props: {
      //   wordModuleId :{type :String,require: true}
      // },
        data() {
          return {
            //要展示的table数据
            tableDataList: [
              // {id:'1',wordModuleId:"1", wordChinese:"苹果",wordEnglish:"apple",show:false},
              // {id:'2',wordModuleId:"1", wordChinese:"橘子",wordEnglish:"orange",show:false},
            ],
            //索引id
            addIndexId:0,
            // wordModuleId:'',
            //单词模板id
            wordModuleId:"",
            //中文名称
            wordChinese:"",
            //英文名称
            wordEnglish:"",

          }
        },
      methods :{
        // 添加一行数据
          addWordData(){
          let addIndexId = this.addIndexId;
            addIndexId = addIndexId-1;
            this.addIndexId = addIndexId;

              //一列数据内容
              let data = {
              addIndexId:addIndexId,
              id:'',
              wordModuleId:this.wordModuleId,
              wordChinese:"",
              wordEnglish:"",
              show:true};
            this.tableDataList.push(data);

          },

      //删除确认
        deleteAction(addIndexId,wordChinese,wordEnglish,id) {
          this.$confirm('正在删除('+wordChinese+'-'+wordEnglish+')  是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteWordData(addIndexId,id)

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        deleteWordData(addIndexId,id) {
          //如果id为空 则使用索引 addIndexId 删除
          if(id==''){
              let tableDataList = this.tableDataList;
                let tableDataListNew = [];
              for (let index = 0; index < tableDataList.length; index++) {
                let tableData = tableDataList[index];
                 if(tableData.addIndexId != addIndexId){
                    tableDataListNew.push(tableData);
                 }
              }
              this.tableDataList = [];
              this.tableDataList = tableDataListNew;
              tableDataList = [];
              tableDataListNew = [];
              return;
            }

          this.$store.dispatch("wordModule/deleteWordData", id).then((res) => {
                //刷新数据
                this.selectWordDataById(this.wordModuleId);
                ElementUI.Message({
                  message: '删除成功',
                  type: 'success'
                });
          }).catch((e) => {
            console.log(e)
          });

        },
        //保存
        saveWordData(scope){
          let sendData = scope.row;
          if(sendData.wordEnglish==null||sendData.wordChinese==''){
            ElementUI.Message({
              message: '请先填写单词',
              type: 'success'
            });
            return;
          }
          // alert(JSON.stringify(scope.row));
          // alert(JSON.stringify(this.wordModuleId));
          // alert(JSON.stringify(sendData));

          this.$store.dispatch("wordModule/saveWordData", sendData).then((res) => {
            //刷新当前页
            this.selectWordDataById(sendData.wordModuleId);
            //刷新父级列表页
            this.refreshListData();
            //改变现实方式
            scope.row.show =false

            ElementUI.Message({
              message: '保存完成',
              type: 'success'
            });

          }).catch((e) => {
            console.log(e)
          });

        },

        updateStudentRecordList(addIndexId,id,studentId,studentName){
          let tableDataList = this.tableDataList;
          //如果id为空使用索引id更新
          if(id==null||id==''){
            for (let index = 0; index < tableDataList.length; index++) {
              let tableData = tableDataList[index];
              if(tableData.addIndexId == addIndexId){
                tableData.studentId = studentId;
                tableData.studentName = studentName;
                return
              }
            }
          }else {
            //如果id不为空，则使用id更新
            for (let index = 0; index < tableDataList.length; index++) {
              let tableData = tableDataList[index];
              if(tableData.id == id){
                tableData.studentId = studentId;
                tableData.studentName = studentName;
                return
              }
            }
          }

        },

        updateWordDataList(addIndexId,id,courseType,courseName){
          let tableDataList = this.tableDataList;
          if(id==null||id==''){
            for (let index = 0; index < tableDataList.length; index++) {
              let tableData = tableDataList[index];
              if(tableData.addIndexId == addIndexId){
                tableData.courseType = courseType;
                tableData.courseName = courseName;
                return
              }
            }
          }else {
            for (let index = 0; index < tableDataList.length; index++) {
              let tableData = tableDataList[index];
              if(tableData.id == id){
                tableData.courseType = courseType;
                tableData.courseName = courseName;
                return
              }
            }
          }

        },

        selectWordDataById(wordModuleId){
            this.tableDataList = [];
            this.$store.dispatch("wordModule/selectWordDataById", wordModuleId).then((res) => {
              const wordDataList = res.data;
              // console.log("wordDataList " +JSON.stringify(wordDataList));
              if (wordDataList != null) {
                for (let index = 0; index < wordDataList.length; index++) {
                  let entity = wordDataList[index];
                  if (entity != null) {
                    const data = {id:entity.id,
                      wordModuleId:entity.wordModuleId,
                      wordChinese:entity.wordChinese,
                      wordEnglish: entity.wordEnglish,
                      show:false};
                    // let entity = {"value": student.id, "label": student.studentName};
                    this.tableDataList.push(data);
                    // console.log(JSON.stringify(this.tableDataList));
                  }
                }
              }

          }).catch((e) => {
            console.log(e)
          });

        },


      },
      mounted() { //mounted 是vue的生命周期函数中的其中一个，表示，页面加载完毕执行
      },
      created() {
        //接收发送过来的数据
        Bus.$off('toWordModuleIdAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toWordModuleIdAction', wordModuleId => {
          // console.log("wordModuleId "+wordModuleId);
          this.wordModuleId = wordModuleId;
          this.selectWordDataById(wordModuleId)
        });

      }

    }
</script>

<style scoped>

</style>
